<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="container">
      <input
        type="text"
        class="u-search"
        placeholder="搜索目的地、景点、酒店等"
      />
      <div class="hotel">
        <h3>美食推荐</h3>
        <ul>
          <li>
            <a href="javascript(0)"><img src="../img/occupy.png" alt="" /></a>
            <h4>钵钵鸡</h4>
          </li>
          <li>
            <a href="javascript(0)"><img src="../img/occupy.png" alt="" /></a>
            <h4>钵钵鸡</h4>
          </li>
        </ul>
      </div>
      <hr />

      <div class="whole">
        <select name="" id="">
          <option value="">类别</option>
        </select>
        <select name="" id="">
          <option value="">距离优先</option>
        </select>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="" />
                <div class="right">
                  <span class="u-chongqing">老成都火锅</span>
                  <br />
                  <span class="u-distance"
                    >>100km | 四川省成都市龙泉驿区茶</span
                  >
                  <br />
                  <span class="u-advice">营业时间：9:00 ~ 17:30</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
    <div class="footer">
        - 我也是有底线的 -
    </div>
    </div>
  </body>
</html>
